<template>
	<view class="contain">
		<view class="forumContain">
			<input type="text" v-model="forumTitle" placeholder="填写标题会获得更多赞哦~" />
			<view class="forumTitle"></view>
			<textarea v-model="forumContain" placeholder="这一刻的想法..." maxlength='600' @input="inputTextarea()" />
			<view class="textareaBox">
				<view class="imgBox">
					<view class="imgMenu" v-for="(item,index) in imgList" :key="index">
						<view class="renderImg">
							<image :src="item" mode="aspectFill" @click="previewImg(item)"></image>
						</view>
						<view class="deleteImg" @click="deleteImg(index)">
							<image src="../../static/img/deleteImg.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="imgMenu" @click="chooseImg()" v-if="imgList.length<9">
						<image src="../../static/img/upImg.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="typeMenu">
			<text class="typeMenutext">发布栏目</text>
			<view class="typeMenu_list">
				<view :class="forumId === item.Id ? 'typeMenu_list_item_active' : 'typeMenu_list_item'" v-for="(item,index) in renderMsg" :key="index" @click="choiceType(item.Id,item.Name)">
					{{item.Name}}
				</view>
			</view>
		</view>
		<!-- <view class="containLength">{{forumContain.length}}/600</view> -->
		<view class="submit_btn" @click="submitForum()">发布评鉴</view>
	</view>
</template>

<script>
	import Config from '@/config/index.js';
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
	import { AddAppreciationArticle } from '@/api/forum.js';
	import { getHomeMsg } from '@/api/homePage.js'
	export default {
		components: {
		    wybPopup
		},
		data() {
			return {
				forumTitle: '', //发布标题
				forumContain: '', //发布内容
				forumType:'',   //文章类别
				forumId:'',//类别Id
				imgList: [],   //上传图片
				renderMsg:[],
			}
		},
		onLoad() {
			this.getService();
			this.forumId = 1145;
			this.forumType = '红色记忆';
			// this.forumId = this.renderMsg[0].Id;
			// this.forumType = this.renderMsg[0].name;
		},
		methods: {
			inputTextarea() {
				if(this.forumContain.length>=600){
					uni.showToast({
						title:'超过规定字数！',
						icon:'none',
						duration:2000
					})
				}
			},
			choiceType(id,name){
				this.forumType=name;
				this.forumId=id;
			},
			touch(){
				this.$refs.popup.show() // 显示
			},
			async submitForum(){
				let arr = [];
				let brr = arr.push(this.forumId);
				
				if(this.forumTitle==''){
					uni.showToast({
						title:'请输入文章标题',
						icon:'none'
					});
					return;
				};
				if(this.forumContain==''){
					uni.showToast({
						title:'请输入文章内容',
						icon:'none'
					});
					return;
				};
				if(this.imgList.length==0){
					uni.showToast({
						title:'请至少上传一张图片',
						icon:'none'
					});
					return;
				};
				if(this.forumType==''){
					uni.showToast({
						title:'请选择文章类别',
						icon:'none'
					});
					return;
				};
				uni.showLoading({
					title:'提交中',
					mask:true
				})
				let that=this;
				try{
					const { Data } =await AddAppreciationArticle({
						SiteId: Config.site.forum_id,
						Title: that.forumTitle,
						Abstract: that.forumContain,
						ImgList: that.imgList,
						ArticleCategoryIds:arr,
					})
					this.$api.msg(`提交成功,等待审核`);
					uni.switchTab({
						url: '/subpages/productList/index',
					})
				}catch(e){
					//TODO handle the exception
				}
			},
			chooseImg(){   //上传照片
				let _this=this;
				if(_this.imgList.length<9){
					let num=9-_this.imgList.length;
					uni.chooseImage({
					    count: num, //默认9
					    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['album','camera'], //从相册选择
					    success: function (res) {
							res.tempFilePaths.forEach((item)=>{
								uni.uploadFile({
								    url: Config.baseUrl+'/API/Users/PictureUpload',
								    filePath: item,
								    name: 'file',
								    success: (uploadFileRes) => {	
										let imgList=JSON.parse(uploadFileRes.data);
										_this.imgList=[..._this.imgList,imgList.picturePath];
								    }
								});
							})
			
					    }
					});
				}else{
					uni.showToast({
						title:'已达上限',
						icon:'none',
						duration: 1000
					})
				}
			},
			previewImg(e){  //图片预览
				uni.previewImage({
				    urls: [e],
				    longPressActions: {
				        itemList: ['发送给朋友', '保存图片', '收藏'],
				        success: function(data) {
				        },
				        fail: function(err) {
				        }
				    }
				});
			},
			deleteImg(e){
				this.imgList.forEach((item,index)=>{
					if(e==index){
						this.imgList.splice(index,1);
					}
				})
			},
			async getService(){
				try{
					uni.showLoading();
					const {Data}=await getHomeMsg({
						ParentId: Config.site.EvaId,
						layers:2,
					})
				   
					const navData = Data.find(item=>item.Id === Config.site.pingjianNav)
					uni.hideLoading();
					this.renderMsg=navData.Children;
					this.getEvaListDefault()
				}catch(e){
					//TODO handle the exception
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100vw;
		min-height: 100vh;
		padding: 5rpx 10rpx;
        background-color: #e9e9e9;
		
		.forumContain {
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 80rpx 40rpx 20rpx;
            background-color: #f8f8f8;
			color: #111111;
			textarea {
				width: 100%;
				height: 300rpx;
			}
		}

		.forumTitle{
			height: 2rpx;
			width: 100%;
			margin:28rpx 0 ;
			background-color: #EEEEEE;
			text-align: center;
		}

		.viewblack{
			height: 10rpx;
			width: 100vw;
			background-color: #EEEEEE;
			text-align: center;
		}

		.containLength {
			width: 100%;
			text-align: right;
			color: #666;
			border-bottom: 1rpx solid #f5f5f5;
			padding-bottom: 20rpx;
		}
	}

	.imgBox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		.imgMenu {
			width: 145rpx;
			height: 140rpx;
			position: relative;
			margin: 0 20rpx 20rpx 0;

			.renderImg {
				width: 100%;
				height: 100%;
				border: 1rpx solid #f5f5f5;
				border-radius: 6rpx;
				overflow: hidden;
			}

			image {
				width: 100%;
				height: 100%;
			}

			.deleteImg {
				position: absolute;
				top: -20rpx;
				right: -10rpx;
				width: 50rpx;
				height: 50rpx;
				text-align: right;

				image {
					width: 25rpx;
					height: 25rpx;
				}
			}
		}
	}
	.textBox{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		// border-bottom: 1rpx solid #f5f5f5;
		background-color: #f8f8f8;
		display: flex;
		align-items: center;
		color: #111;
		padding: 0 20rpx;
		margin-top: 20rpx;
		input{
			flex: 6;
		}
		.typeBtn{
			width: 160rpx;
			height: 70rpx;
			font-size: 30rpx;
			line-height: 70rpx;
			text-align: center;
			background: linear-gradient(to left,rgb(241,168,73),rgb(230,128,56));
			color: #fff;
			border-radius: 20rpx;
		}
	}
	.popupMsg{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1rpx solid #f5f5f5;
	}
	.submit_btn{
		// position: fixed;
		margin-top:100rpx;
		margin-left: 7%;
		width: 85%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: large;
		font-weight: bold;
		border-radius: 40rpx;
		color: #fff;
		text-align: center;
		bottom: 120rpx;
		background: linear-gradient(to left,rgb(241,168,73),rgb(230,128,56));
	}
	.typeMenu{
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 20rpx 40rpx;
		background-color: #f8f8f8;
		.typeMenutext{
			color: #808080;
			font-size: 25rpx;
			font-weight: bold;
		}
		.typeMenu_list{
			margin: 20rpx 0;
			display: flex;
			flex-wrap: wrap;
			.typeMenu_list_item{
				border-radius: 5rpx;
				text-align: center;
				font-size: 25rpx;
				margin-right: 7rpx;
				background-color: #999999;
				color: #FFFFFF;
				padding:6rpx 10rpx;
				margin-bottom: 7rpx;
			}
			.typeMenu_list_item_active{
				background-color: #e99544;
				color: #FFFFFF;
				border-radius: 5rpx;
				text-align: center;
				font-size: 25rpx;
				margin-right: 7rpx;
				padding:6rpx 10rpx;
				margin-bottom: 7rpx;
			}
		}
	}
</style>
